<template>
	<m-block bgColor="unset" class="goods-list" spa="0">
		<view class="title">
			<m-icon type="title-icon" :size="[41,26]" />
			<text>{{title}}</text>
			<m-icon type="title-icon" :size="[41,26]" />
		</view>
		<view class="list-box mb-16">
			<template v-for="item in listArr">
				<goodsCard class="li" :item="item"></goodsCard>
			</template>
		</view>
		<m-loading gap="100 0" :list="listArr" :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
	</m-block>
</template>

<script>
	import { GetGoodsPage } from '@/api/Goods.js';
	export default {
		name: "hot-sale",
		data() {
			return {
				key: '',
				wards: '',
				listArr: [],
				pageSize: 10,
				pageIndex: 1,
				pageCount: 1,
				isLoading: false
			};
		},
		props: {
			title: {
				type: String,
				default: '猜·你·喜·欢'
			},
			// wards:{
			// 	type: Number,
			// 	default: ''
			// },
			tid: [String, Number],
			//排序模式
			sortPrice: {
				type: [String, Number],
				default: 5
			},
			ishot: { // 推荐商品
				type: Number,
				default: 0
			},
			isnew: { // 是否新品
				type: Number,
				default: 0
			},
			istop: { // 火爆商品
				type: Number,
				default: 0
			},

		},
		mounted() {
			// if (this.isRecommend || this.isNew || this.isCheap || this.isBargain) {
			// 	this.isShowOnFirstPage = false;
			// }
			this.getData();
		},
		watch: {
			tid() {
				this.onReset();
			},
		},
		onLoad() {

		},
		methods: {
			onReset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.listArr = [];
				this.getData();
			},
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return;
				}
				this.isLoading = true;
				const { success, list, pageCount } = await GetGoodsPage({
					ishot: this.ishot,
					istop: this.istop,
					isnew: this.isnew,
					// key: this.key,
					tid: this.tid, // 分类id
					// wards: this.wards,
					pageSize: this.pageSize,
					pageIndex: this.pageIndex
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
			},
		},
	}
</script>

<style lang="scss">
	.goods-list {
		.title {
			text {
				padding: 0 20rpx;
			}

			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}

		.list-box {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-row-gap: 16rpx;
			grid-gap: 16rpx;
			padding-top: 20rpx;

			.li:nth-of-type(1n+2) {}
		}
	}
</style>